<template>
	<div style="padding-top: 40px;">
		<div class="graybg"></div>
		<!--头部-->
		<header id="header" @keydown.enter="search">
			<div class="header header_bg clearfix">
				<div class="header-input clearfix">
					<i class="iconfont pull-left" @click="search">&#xe680;</i>
					<input type="text" placeholder="请输入好友信息" maxlength="50" v-model="text"/>
				</div>
				<div class="header_right">
					<router-link to="/wmyfriend">
					<em class="baiColor">取消</em>
					</router-link>
				</div>
			</div>
		</header>
		<div class="main marginAuto" v-show="seekOut">
			<div class="main-text marginAuto clearfix" >
				<div class="main-img pull-left">
					<img :src="friends.u_img"/>
				</div>
				<div class="name pull-left">
					<span v-text="friends.u_name"></span>
				</div>
				<div class="add pull-right" @click="adds(friends.u_id)">
					<span>添加</span>
				</div>
			</div>
		</div>
		<div class="main marginAuto" v-show="notFound">
			<div class="main-text marginAuto clearfix notFound-text">
				<h3>该用户不存在</h3>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				//好友信息
				text:"",
				name:"",
//				用户是否存在
				seekOut:false,	
				notFound:false,
				friends:{},
			}
		},
		mounted(){
			var str=window.location.href;
			var num=str.lastIndexOf("/")+1;
			var id = str.substring(num);
			if(id == "&"){
				this.text = "";
			}else{
				//获取用户的信息
				var params = new URLSearchParams();
				var info = window.localStorage.data;
				this.$axios({
					url:'/One/Social/searchFriends',
					method:"GET",
					params:{
						token:info,
						key:id
					}
				}).then((res) => {
					if(res.data.status == 0){
						this.notFound = true;
						this.seekOut = false
					}else if (res.data.status == 1){
						this.notFound = false;
						this.seekOut = true
						this.friends = res.data.data;
					}
				}).catch((err) => {
					console.log(err)
				})
			}
		},
		methods:{
			//搜索好友
			search(){
				//获取用户的信息
				var params = new URLSearchParams();
				var info = window.localStorage.data;
				this.$axios({
					url:'/One/Social/searchFriends',
					method:"GET",
					params:{
						token:info,
						key:this.text
					}
				}).then((res) => {
					if(res.data.status == 0){
						this.notFound = true;
						this.seekOut = false
					}else if (res.data.status == 1){
						this.notFound = false;
						this.seekOut = true
						this.friends = res.data.data;
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			//添加
			adds:function(id){
				var params = new URLSearchParams();
				var info = window.localStorage.data;
				params.append('token', info); //客户秘钥（信息）
				params.append('id', id);
				this.$axios({
					url: "One/Social/searchFriends",
					method: "POST",
					data: params
				}).then((res) => {
					if(res.data.status == 1){
						alert('好友请求已发出')
					}else if(res.data.status == 2){
						alert('好友请求发送失败')
					}else if(res.data.status == 3){
						alert('你们已经是好友了')
					}
				}).catch(function(err) {
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped>
	@import "../css/public.css";
	
	.header-input{
		width: 80%;
		background: #fff;
		height: 30px;
		margin-top: 5px;
		margin-left: 12px;
		border-radius: 5px;
	}
	.header-input i{
		font-size: 22px;
		color:#9FA2A8 ;
		line-height: 24px;
		margin: 5px;
	}
	.header-input input{
		height: 28px;
		line-height: 28px;
		color: #333;
		font-size: 16px;
		width: 80%;
	}
	.main{
		width: 95%;
		height: 60px;
		background: #fff;
		margin-top: 10px;
	}
	.main-text{
		width: 95%;
	}
	.main-img{
		width: 38px;
		height: 38px;
		margin-top: 12px;
		margin-right: 10px;
	}
	.main-img img{
		width: 100%;
		height: 100%;
		border-radius: 8px;
	}
	.name{
		line-height: 58px;
		font-size:16px;
		color: #333;
	}
	.add{
		width:50px;
		height: 30px;
		text-align: center;
		background:#F3961F;
		border-radius: 3px;
		margin-top: 15px;
	}
	.add span{
		color: #fff;
		font-size: 16px;
		line-height: 28px;
	}
	.notFound-text{
		text-align: center;
		font-size: 14px;
		color:#333333;
		line-height: 60px;
	}
</style>